<!DOCTYPE html>
<html>
  <head>
    <script src="../dist/jspsych.js"></script>
    <script src="../dist/plugin-categorize-html.js"></script>
    <link rel="stylesheet" href="../dist/jspsych.css">
  </head>
  <body></body>
  <script>

    var jsPsych = initJsPsych({
      on_finish: function() {
        jsPsych.data.displayData();
      }
    });

    var trial = {
      type: jsPsychCategorizeHtml,
      stimulus: '<div style="margin: auto; width: 200px; height: 200px; background-color: blue;"></div>',
      key_answer: 'b',
      choices: ['b', 'p'],
      text_answer: 'blue',
      correct_text: "<p>Correct. This color is %ANS%.</p>",
      incorrect_text: "<p>Incorrect. This color is %ANS%. Please press the correct key to continue.</p>",
      prompt: "<p>Press &quot;b&quot; if the square is blue. Press &quot;p&quot; if the square is purple.</p>",
      trial_duration: 1500,
      show_feedback_on_timeout: false,
      force_correct_button_press: true
    };

    jsPsych.run([trial]);

  </script>
</html>